<template>
  <van-popup
      v-model:show="data.showAdd"
      position="bottom"
      :style="{ height: '100%', width: '100%', borderRadius: '16px 16px 0 0' }"
      @closed="destroyEditor"
  >
    <div class="publisher-container">
      <!-- 标题区域 -->
      <van-field
          v-model="data.addForm.title"
          label="标题"
          placeholder="说点什么..."
          :border="false"
          class="publisher-item"
      />

      <!-- 标签选择区域 -->
      <div class="publisher-item">
        <span class="field-label">标签</span>
        <div class="tag-container">
          <van-tag
              v-for="tag in selectedTags"
              :key="tag.id"
              closable
              @close="removeTag(tag.id)"
              class="selected-tag"
          >
            {{ tag.name }}
          </van-tag>
          <van-button
              round
              size="small"
              type="primary"
              @click="showTagPopup = true"
              class="add-tag-btn"
          >
            <van-icon name="plus" size="16" /> 添加标签
          </van-button>
        </div>
      </div>

      <!-- 类型选择区域 -->
      <van-field
          v-model="selectedTypeName"
          label="类型"
          readonly
          clickable
          :border="false"
          class="publisher-item"
          @click="showTypePopup = true"
      />

      <!-- 富文本编辑区域 -->
      <div class="publisher-item editor-container">
        <span class="field-label">内容</span>
        <div ref="editor" class="editor-content"></div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="bottom-actions">
        <van-button
            type="info"
            round
            @click="data.showAdd=false"
            class="cancel-btn"
        >
          取消
        </van-button>
        <van-button
            type="primary"
            round
            @click="save"
            class="save-btn"
        >
          保存
        </van-button>



        <van-button
            type="primary"
            round
            @click="doAdd"
            class="submit-btn"
        >
          提交
        </van-button>
      </div>

      <!-- 标签选择弹窗 -->
      <van-popup
          v-model:show="showTagPopup"
          position="bottom"
          :style="{ height: '60%' }"
      >
        <div class="popup-header">
          <van-button
              type="text"
              @click="showTagPopup = false"
              class="popup-close"
          >
            取消
          </van-button>
          <h3 class="popup-title">选择标签</h3>
          <van-button
              type="text"
              @click="showTagPopup = false"
              class="popup-confirm"
          >
            完成
          </van-button>
        </div>
        <div class="tag-list">
          <van-tag
              v-for="tag in allTags"
              :key="tag.tagId"
              :plain="!isTagSelected(tag.tagId)"
              :color="isTagSelected(tag.tagId) ? '#1677ff' : ''"
              @click="toggleTag(tag)"
              class="tag-item"
          >
            {{ tag.name }}
          </van-tag>
        </div>
      </van-popup>

      <!-- 类型选择弹窗 -->
      <van-popup
          v-model:show="showTypePopup"
          position="bottom"
      >
        <van-picker
            :columns="typeOptions"
            @confirm="handleTypeConfirm"
            @cancel="showTypePopup = false"
        />
      </van-popup>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { client, getFileNameUUID } from '../utils/alioss';
import axios from "@/utils/axios.ts";
import WangEditor from 'wangeditor';
import {useRouter,useRoute} from "vue-router";
import {Dialog, Toast} from "vant";



const router = useRouter();
const route = useRoute();
// 编辑器实例
const editor = ref<HTMLElement | null>(null);
let instance: any = null;

const contentId = ref(''); // 草稿ID
const isEditMode = ref(false); // 是否为“修改”模式（true=修改，false=新建）
// 响应式数据
const data = reactive({
  showAdd: true,
  addForm: {
    title: '',
    content: '', // 富文本内容
    contentType: 0, // 类型：0纯文本，1图文，2视频
    coverImage: '', // 封面照片
    tagsId: [], // 标签ID数组
    heat: 0,
    viewCount: 0,
    likeCount: 0,
    collectCount: 0,
    status: 1,
    userId:1,
    commentCount:0,
    createTime:''
  }
});

  interface Tag {
    tagId: number;
    name:string;
  }


  const allTags = ref<Tag[]>([]);

const getAllTags=()=>{
  const url = "/api/content/tags";
  axios.get(url)
      .then(res=>{
        console.log("res:",res)

        allTags.value = res;
        console.log("aiiTags.value",allTags.value)


      })
      .catch(err => {
        // 打印详细错误，定位问题（如代理错误、跨域、后端报错）
        console.error("获取标签失败！错误信息：", err);
        console.error("失败时的响应状态码：", err.response?.status);
        console.error("失败时的响应数据：", err.response?.data);
        alert("获取标签失败，请查看控制台错误信息");
        // 兜底：给默认标签，避免页面空白
        allTags.value = [
          { tagId: 1, name: "文学" },
          { tagId: 2, name: "科技" },
          { tagId: 3, name: "美食" }
        ];
      });
}

// 标签相关
const selectedTags = ref<any[]>([]);
const showTagPopup = ref(false);

// 类型选择相关
const typeOptions = [
  { text: "纯文本", value: 0 },
  { text: "图文", value: 1 },
  { text: "视频", value: 2 }
];
const selectedType = ref(0);
const selectedTypeName = ref("纯文本");
const showTypePopup = ref(false);

// 初始化编辑器
const initEditor = () => {
  if (editor.value && !instance) {
    instance = new WangEditor(editor.value);

    // 配置编辑器
    instance.config.showLinkImg = true;
    instance.config.showLinkImgAlt = true;
    instance.config.showLinkImgHref = true;
    instance.config.uploadImgMaxSize = 5 * 1024 * 1024; // 5M
    instance.config.uploadVideoMaxSize = 100 * 1024 * 1024; // 100M
    instance.config.uploadFileName = 'file';
    instance.config.uploadImgHeaders = {
      token: localStorage.getItem('token') || ''
    };

    // 自定义图片上传
    instance.config.customUploadImg = function (resultFiles: any, insertImgFn: any) {
      resultFiles.forEach((file: any) => {
        const fileName = `moments/images/${getFileNameUUID()}${file.name}`;
        client().put(fileName, file).then((res: any) => {
          insertImgFn(res.url);
          // 如果是图文类型且没有封面图，自动设置第一张图为封面
          if (data.addForm.contentType === 1 && !data.addForm.coverImage) {
            data.addForm.coverImage = res.url;
          }
        });
      });
    };

    // 自定义视频上传
    instance.config.customUploadVideo = function (resultFiles: any, insertVideoFn: any) {
      resultFiles.forEach((file: any) => {
        const fileName = `moments/videos/${getFileNameUUID()}${file.name}`;
        client().put(fileName, file).then((res: any) => {
          insertVideoFn(res.url);
          // 如果是视频类型，设置视频为封面
          if (data.addForm.contentType === 2) {
            data.addForm.coverImage = res.url;
          }
        });
      });
    };

    // 内容变化时同步到表单
    instance.config.onchange = (html: string) => {
      data.addForm.content = html;
    };

    instance.create();
  }
};

// 检查标签是否已选择
const isTagSelected = (tagIdl: number) => {
  return selectedTags.value.some(tag => tag.tagId === tagIdl);
};

// 切换标签选择状态
const toggleTag = (tag: any) => {
  const index = selectedTags.value.findIndex(t => t.tagId === tag.tagId);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  } else {
    selectedTags.value.push(tag);
  }
};

// 移除标签
const removeTag = (tagIdl: number) => {
  const index = selectedTags.value.findIndex(t => t.tagId === tagIdl);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  }
};

// 处理类型选择确认
const handleTypeConfirm = (value: any) => {
  const selectedValue = typeof value === 'object' ? value.value : value;
  data.addForm.contentType = selectedValue;
  selectedType.value = selectedValue;
  console.log("类型：", data.addForm.contentType)

  const matchedOption = typeOptions.find(item => item.value === selectedValue);
  selectedTypeName.value = "";
  selectedTypeName.value = matchedOption ? matchedOption.text : "纯文本";


  if (instance) {
    // 注意：这里判断条件要用 selectedValue，而非原始 value（避免对象判断错误）
    if (selectedValue === 0) {
      instance.config.showLinkImg = false;
      instance.config.showVideo = false;
    } else if (selectedValue === 1) {
      instance.config.showLinkImg = true;
      instance.config.showVideo = false;
    } else {
      instance.config.showLinkImg = true;
      instance.config.showVideo = true;
    }
  }
  showTypePopup.value = false;

};
//格式化时间
  const formatDate = (date: Date): string => {
    const year = date.getFullYear();
    // 月份/日期/小时/分钟/秒 不足2位补0
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    // 返回格式化后的时间（适配大多数后端 datetime 类型）
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

// 提交表单
const doAdd = () => {
  // 收集标签ID
  const tagsIdArry = selectedTags.value.map(tag => tag.tagId);
  const tagsString = tagsIdArry.join(',');

  // 简单验证
  if (!data.addForm.title && !data.addForm.content) {
    alert('标题和内容不能同时为空');
    return;
  }
  //data.addForm.createTime = formatDate(new Date());

  // 3. 构造提交数据：关键是携带 contentId 和设置状态为 1（已发布）
  const submitData = {
    ...data.addForm,
    tagsId: tagsString,
    createTime: formatDate(new Date()),
    status: 1 // 发布状态：1=已提交/已发布（与后端状态定义一致）
  };

  // 4. 区分“新建发布”和“修改发布”，调用不同接口
  let url = '';
  if (isEditMode.value) {
    // 🔴 修改发布：调用更新接口，携带原草稿的 contentId
    url = "/api/content/update";
    submitData.contentId = contentId.value; // 必须携带原草稿ID，后端才能定位要更新的草稿
  } else {
    // 🟢 新建发布：调用新增接口（原逻辑）
    url = "/api/content/add";
  }

  // 5. 发送请求
  axios.post(url, submitData)
      .then(res => {
        console.log("发布接口响应：", res);
        if (res.code === 200) {
          const successMsg = isEditMode.value
              ? '原草稿修改并发布成功'
              : '新建内容发布成功';
          Toast.success(successMsg);
          resetForm();
          router.push("/login"); // 按原逻辑跳转，可根据需求调整（如跳首页）
        } else {
          Toast.fail('发布失败：' + (res.msg || '未知错误'));
        }
      })
      .catch(err => {
        console.error('发布接口失败：', err);
        Toast.fail('网络错误，发布失败');
      });



//   const submit={
//     ...data.addForm,//复制原来表单
//   tagsId:tagsString
//
// }
//
//   const url = "/api/content/add";
//   axios.post(url,submit)
//       .then(res => {
//         console.log("res:",res)
//
//         if (res.code === 200) {
//           alert('提交成功');
//           resetForm();
//           router.push("/login")
//         } else {
//           alert('提交失败：' + res.msg);
//         }
//       })
//       .catch(err => {
//         console.error('提交失败', err);
//         alert('提交失败，请重试');
//       });
};
const save = () => {
  // 收集标签ID
  const tagsIdArry = selectedTags.value.map(tag => tag.tagId);
  const tagsString = tagsIdArry.join(',');

  // 简单验证
  if (!data.addForm.title && !data.addForm.content) {
    alert('标题和内容不能同时为空');
    return;
  }
  data.addForm.createTime = formatDate(new Date());
  data.addForm.status = 0;

  const submitData = {
    ...data.addForm,
    tagsId: tagsString,
    createTime: formatDate(new Date()),
    status: 0 // 保存到草稿箱，状态仍为“未发布”
  };

  // 4. 区分“新建”和“修改”：调用不同接口
  let url = '';
  if (isEditMode.value) {
    // 修改模式：调用更新接口，必须携带 contentId（主键）
    url = "/api/content/update";
    submitData.contentId = contentId.value; // 补充主键，后端需通过主键更新
  } else {
    // 新建模式：调用新增接口
    url = "/api/content/add";
  }

  // 5. 发送请求
  axios.post(url, submitData)
      .then(res => {
        console.log("保存接口响应：", res);
        if (res.code === 200) {
          alert(isEditMode.value ? '修改草稿成功' : '保存到草稿箱成功');
          resetForm();
          router.push("/draftBox"); // 跳回草稿箱
        } else {
          alert('保存失败：' + (res.msg || '未知错误'));
        }
      })
      .catch(err => {
        console.error('保存接口失败：', err);
        alert('网络错误，保存失败');
      });


  // const submit={
  //   ...data.addForm,//复制原来表单
  //   tagsId:tagsString
  //
  // }
  // //从保存content表里再获取自增的主键，赋值给草稿箱里
  //
  // const url = "/api/content/add";
  // axios.post(url,submit)
  //     .then(res => {
  //       console.log("【content/add 接口响应】res:",res)
  //
  //       if (res.code === 200) {
  //
  //         resetForm();
  //         router.push("/draftBox");
  //
  //         alert('保存成功：' + res.msg);
  //
  //       } else {
  //         alert('保存失败：' + res.msg);
  //       }
  //     })
  //     .catch(err => {
  //       console.error('保存失败', err);
  //       alert('保存失败，请重试');
  //     });
};


// 重置表单
const resetForm = () => {
  console.log("重置表单被调用")
  data.addForm = {
    title: '',
    content: '',
    contentType: 0,
    coverImage: '',
    tagsId: [],
    heat: 0,
    viewCount: 0,
    likeCount: 0,
    collectCount: 0,
    status: 1,
    userId:1,
    commentCount:0,
    createTime:''


  };
  selectedTags.value = [];
  selectedType.value = 0;
  selectedTypeName.value = "纯文本";
  if (instance) {
    instance.txt.clear();
  }
};

// 销毁编辑器
const destroyEditor = () => {
  if (instance) {
    instance.destroy();
    instance = null;
  }
};

// 监听弹窗显示状态，初始化编辑器
watch(
    () => data.showAdd,
    (newVal) => {
      if (newVal && editor.value) {
        initEditor();
      }
    }
);

// 新增：请求草稿数据（用于修改时回显）
const fetchDraftData = async () => {
  try {
    const res = await axios.get('/api/content/getById', {
      params: {
        contentId: contentId.value // 传递草稿ID
      }
    });
    // 接口成功且有数据
    if (res.code === 200 && res.data) {
      const draftData = res.data; // 后端返回的草稿数据（Content 对象）
      // 1. 回显标题
      data.addForm.title = draftData.title || '';
      // 2. 回显富文本内容（需通过 WangEditor 的 API 设置）
      data.addForm.content = draftData.content || '';
      if (instance) {
        instance.txt.html(draftData.content || ''); // 给编辑器设置内容
      }
      // 3. 回显类型（contentType）和类型名称
      data.addForm.contentType = draftData.contentType || 0;
      const matchedType = typeOptions.find(item => item.value === draftData.contentType);
      selectedTypeName.value = matchedType ? matchedType.text : "纯文本";
      // 4. 回显标签（需将后端返回的 tagsId 字符串拆分为数组，再匹配标签）
      const tagsIdStr = draftData.tagsId || '';
      const tagsIdArr = tagsIdStr.split(',').filter(id => id); // 拆分为数组（过滤空值）
      // 从 allTags 中筛选出已选中的标签，赋值给 selectedTags
      selectedTags.value = allTags.value.filter(tag =>
          tagsIdArr.includes(String(tag.tagId)) // 注意：后端返回的是数字，需转字符串匹配
      );
      // 5. 回显其他字段（如封面图，按需添加）
      data.addForm.coverImage = draftData.coverImage || '';
    } else {
      Toast.fail('获取草稿数据失败：' + (res.msg || '未知错误'));
    }
  } catch (error) {
    console.error('获取草稿数据接口失败：', error);
    Toast.fail('网络错误，无法加载草稿');
  }
};





// 组件挂载时初始化
onMounted(() => {
  getAllTags();

  const queryContentId = route.query.contentId;
  const queryType = route.query.type;
  // 2. 判断是否为修改模式
  if (queryContentId && queryType === 'edit') {
    contentId.value = queryContentId; // 保存草稿ID
    isEditMode.value = true; // 标记为修改模式
    fetchDraftData(); // 调用接口，获取草稿数据回显
  }


  if (data.showAdd && editor.value) {
    initEditor();
  }
});
</script>

<style scoped>
.publisher-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #fff;
}

.publisher-item {
  margin-bottom: 16px;
}

.field-label {
  display: inline-block;
  width: 60px;
  font-size: 14px;
  color: #64748b;
  vertical-align: top;
}

.tag-container {
  display: inline-block;
  width: calc(100% - 60px);
  vertical-align: top;
}

.selected-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.add-tag-btn {
  margin-bottom: 8px;
}

.editor-container {
  flex: 1;
  overflow: hidden;
  z-index: 1; /* 降低富文本编辑器层级，确保遮罩能覆盖 */
  position: relative;
}

.editor-content {
  display: inline-block;
  width: calc(100% - 60px);
  height: 100%;
  min-height: 200px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  vertical-align: top;
}

.bottom-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.cancel-btn, .submit-btn {
  width: 45%;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.popup-close, .popup-confirm {
  color: #1677ff;
}

.tag-list {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  overflow-y: auto;
  height: calc(100% - 60px);
}

.tag-item {
  padding: 6px 12px;
  font-size: 14px;
}


   /* 取消按钮：修改背景色、文字色、大小 */
 .bottom-actions
 .cancel-btn {
   background-color: #ccc; /* 自定义背景色 */
   color: #333; /* 自定义文字色 */
   width: 60px; /* 自定义宽度 */
   height: 40px; /* 自定义高度 */
   font-size: 14px; /* 自定义文字大小 */

 }

/* 保存按钮：修改背景色、文字色、大小 */
.save-btn { /* 注意：要给“保存”按钮的 class 改为 save-btn */
  background-color: #ff9900; /* 自定义背景色 */
  color: #fff; /* 自定义文字色 */
  width: 60px; /* 自定义宽度 */
  height: 40px; /* 自定义高度 */
  font-size: 14px; /* 自定义文字大小 */
}

/* 提交按钮：修改背景色、文字色、大小 */
.submit-btn {
  background-color: #27ae60; /* 自定义背景色 */
  color: #fff; /* 自定义文字色 */
  width: 60px; /* 自定义宽度 */
  height: 40px; /* 自定义高度 */
  font-size: 14px; /* 自定义文字大小 */
}
</style>
